<template>
	<view class="baseForm">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<!-- 条码录入 -->
		<u-text text="收货包装信息" class="area-header">
		</u-text>
		<view>
			<view class="body">
				<u-row customStyle="margin: 20px 0">
					<u-col :span="3">
						包装编号：
					</u-col>
					<u-col :span="9">
						<u-text :text="detail.unitCode" align="right"></u-text>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 20px">
					<u-col span="3">
						物料：
					</u-col>
					<u-col span="9">
						<u-text :text="detail.materialCode + '(' + detail.materialName + ')'" align="right"></u-text>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 20px">
					<u-col span="3">
						件数重量：
					</u-col>
					<u-col span="9">
						<u-text :text="detail.weight + ' ' + detail.unit + '/' + detail.count + '件'"
							align="right"></u-text>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 20px">
					<u-col span="3">
						炉号：
					</u-col>
					<u-col span="9">
						<u-text :text="detail.heatNumber" align="right"></u-text>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 20px">
					<u-col span="3">
						到货日期：
					</u-col>
					<u-col span="9">
						<u-text :text="new Date(detail.arrivalDate).toLocaleDateString()" align="right"></u-text>
					</u-col>
				</u-row>
			</view>
		</view>
		<u-text text="收货库位信息" class="area-header">
		</u-text>
		<view class="body">
			<view class="upload-scan">
				<scan-bar id="scanInput" ref="scanBarRef" placeholder="扫描库位码" @code-scanned="getBinByCode"
					:key="datekey"></scan-bar>
			</view>
			<u--form labelPosition="left" :model="umodel" :rules="rules" ref="uForm" class="form" labelWidth="150rpx"
				errorType="toast">
				<u-form-item label="库位" prop="binCode">
					<u--input v-model="umodel.binCode" disabled inputAlign="right" border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<u-line></u-line>
		<!-- 提交按钮 -->
		<view class="search">
			<u-button type="primary" @click="confirmButtonClick" class="custom-style" :loading="posting">确定</u-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed, reactive, ref } from 'vue';
	import { onShow, onHide, onPullDownRefresh, onPageScroll } from '@dcloudio/uni-app';
	import ScanBar from '@/components/scan-bar/index.vue';
	import { http } from "../../../utils/http";
	import ULine from "../../../uni_modules/uview-plus/components/u-line/u-line.vue";
	import { useWmsStore } from '@/stores/useWmsStore';
	// 表单数据定义
	const umodel = reactive({
		binId: '',
		binCode: '',
	});

	// 重置表单信息 & 光标自动blur
	const scanBarRef = ref();
	const datekey = ref(new Date());
	const detail = computed(() => JSON.parse(useWmsStore().receiveDetailInfo));
	const detailListUpd = computed(() => JSON.parse(useWmsStore().receiveDetailListUpd));
	// 表单规则定义
	const rules = ref({
		binCode: [
			{
				type: 'string',
				required: true,
				message: '请选择目标货位',
				trigger: ['blur', 'change']
			}
		],
	});

	// 校验提交
	const uForm = ref();
	const posting = ref(false);

	async function getBinByCode(result : any) {
		const data = await http({
			url: '/wms/bin/getBinByCode/' + result,
			method: 'GET',
			data: {}
		}).finally(
			scanBarRef.value.reset()
		);
		umodel.binId = data.data.id;
		umodel.binCode = data.data.binCode;
	}

	function confirmButtonClick() {
		if (!umodel.binId) {
			uni.$u.toast('请先扫描库位信息！');
		}
		detail.value.binId = umodel.binId;
		detail.value.binCode = umodel.binCode;
		detail.value.isCheck = 1;
		useWmsStore().setReceiveDetailUpd(detail.value)
		console.log('details1', detail.value)
		// 点击异常按钮
		uni.navigateBack();
	}
	
	// onHide(async () => {
	// 	detail.value.binId = umodel.binId;
	// 	detail.value.binCode = umodel.binCode;
	// 	uni.$emit('updateReceiveDetailList', detail.value);
	// })
</script>

<style lang="scss">
	.baseForm {
		.area-header {
			color: #909193;
			padding: 10px 15px;
			margin-bottom: 0;
			font-size: 15px;
			background-color: #f3f4f6;
			display: flex;
		}

		.upload-scan {
			padding: 10px 20rpx;
		}

		.body {
			padding: $uni-page-padding;

			.scan-bar {
				display: flex;
				flex: 1;
			}
			.form {
				padding: 0 20rpx;
			}
		}

		.u-line {
			padding: 10px 0;
		}

		.search {
			display: flex;

			.custom-style {
				// width: 120px;
				margin: 10px 5px 5px;
				height: 36px;
				border-radius: 8px;

				&:nth-child(1) {
					flex: 1
				}

				&:nth-child(2) {
					flex: 3
				}
			}
		}
	}
</style>